<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酒店系统权限管理</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        .sidebar-item.active {
            background-color: rgba(255, 255, 255, 0.1);
            border-left: 4px solid #fff;
        }
        @media (max-width: 768px) {
            .sidebar {
                width: 0;
                overflow: hidden;
                transition: width 0.3s;
            }
            .sidebar.open {
                width: 250px;
            }
            .content {
                margin-left: 0;
            }
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="flex h-screen">
        <!-- 侧边栏 -->
        <div id="sidebar" class="sidebar bg-gray-800 text-white w-64 space-y-6 py-7 px-2 absolute inset-y-0 left-0 transform md:relative md:translate-x-0 transition duration-200 ease-in-out z-10">
            <div class="flex items-center space-x-4 px-4 mb-6">
                <img src="https://via.placeholder.com/50" alt="Logo" class="h-10 w-10 rounded-full">
                <div>
                    <h2 class="text-xl font-bold">酒店管理系统</h2>
                    <p class="text-xs text-gray-400">权限管理模块</p>
                </div>
            </div>
            
            <nav>
                <a href="#" class="sidebar-item active block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-700" data-target="dashboard.html">
                    <i class="fas fa-home mr-2"></i>仪表盘
                </a>
                <a href="#" class="sidebar-item block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-700" data-target="users.html">
                    <i class="fas fa-users mr-2"></i>用户管理
                </a>
                <a href="#" class="sidebar-item block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-700" data-target="roles.html">
                    <i class="fas fa-user-tag mr-2"></i>角色管理
                </a>
                <a href="#" class="sidebar-item block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-700" data-target="user-groups.html">
                    <i class="fas fa-user-friends mr-2"></i>用户组管理
                </a>
                <a href="#" class="sidebar-item block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-700" data-target="organizations.html">
                    <i class="fas fa-sitemap mr-2"></i>组织管理
                </a>
                <a href="#" class="sidebar-item block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-700" data-target="positions.html">
                    <i class="fas fa-id-badge mr-2"></i>职位管理
                </a>
                <a href="#" class="sidebar-item block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-700" data-target="permissions.html">
                    <i class="fas fa-key mr-2"></i>权限管理
                </a>
                <a href="#" class="sidebar-item block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-700" data-target="permission-groups.html">
                    <i class="fas fa-layer-group mr-2"></i>权限组管理
                </a>
            </nav>
        </div>

        <!-- 主内容区 -->
        <div class="content flex-1 flex flex-col overflow-hidden">
            <!-- 顶部导航栏 -->
            <header class="bg-white shadow-sm z-10">
                <div class="flex items-center justify-between h-16 px-4">
                    <div class="flex items-center">
                        <button id="sidebarToggle" class="text-gray-500 focus:outline-none md:hidden">
                            <i class="fas fa-bars"></i>
                        </button>
                        <div class="ml-4 md:ml-0">
                            <h1 id="pageTitle" class="text-xl font-semibold text-gray-800">仪表盘</h1>
                        </div>
                    </div>
                    <div class="flex items-center">
                        <div class="relative">
                            <button class="flex items-center text-gray-500 focus:outline-none">
                                <i class="fas fa-bell text-lg"></i>
                                <span class="absolute top-0 right-0 h-2 w-2 bg-red-500 rounded-full"></span>
                            </button>
                        </div>
                        <div class="relative ml-4">
                            <button class="flex items-center focus:outline-none" id="userMenuButton">
                                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User" class="h-8 w-8 rounded-full">
                                <span class="ml-2 text-sm font-medium text-gray-700 hidden md:block">管理员</span>
                                <i class="fas fa-chevron-down ml-1 text-xs text-gray-400 hidden md:block"></i>
                            </button>
                            <div id="userMenu" class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 hidden">
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">个人资料</a>
                                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">设置</a>
                                <a href="login.html" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">退出登录</a>
                            </div>
                        </div>
                    </div>
                </div>
            </header>

            <!-- 主要内容 -->
            <main class="flex-1 overflow-y-auto p-4">
                <iframe id="contentFrame" src="dashboard.html" class="w-full h-full border-none"></iframe>
            </main>
        </div>
    </div>

    <script>
        // 侧边栏切换
        document.getElementById('sidebarToggle').addEventListener('click', function() {
            document.getElementById('sidebar').classList.toggle('open');
        });

        // 用户菜单切换
        document.getElementById('userMenuButton').addEventListener('click', function() {
            document.getElementById('userMenu').classList.toggle('hidden');
        });

        // 点击其他地方关闭用户菜单
        document.addEventListener('click', function(event) {
            const userMenu = document.getElementById('userMenu');
            const userMenuButton = document.getElementById('userMenuButton');
            if (!userMenuButton.contains(event.target) && !userMenu.contains(event.target)) {
                userMenu.classList.add('hidden');
            }
        });

        // 侧边栏导航
        document.querySelectorAll('.sidebar-item').forEach(item => {
            item.addEventListener('click', function(e) {
                e.preventDefault();
                
                // 更新活动状态
                document.querySelectorAll('.sidebar-item').forEach(el => {
                    el.classList.remove('active');
                });
                this.classList.add('active');
                
                // 更新页面标题
                const pageTitle = this.textContent.trim();
                document.getElementById('pageTitle').textContent = pageTitle;
                
                // 加载内容
                const target = this.getAttribute('data-target');
                document.getElementById('contentFrame').src = target;
            });
        });
    </script>
</body>
</html>